<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Insert title here</title>
	<style type="text/css">
		#dataShowArea{
			border:2px solid black;
			height:20px;
			width:170px;
			display:none;
			border-radius: 10px;
		}
		#queryText{
			border-radius: 10px;
		}
		.wrapper{
			margin:0 auto;
			width:200px;
			height:500px;
		}
	</style>
 <script type="text/javascript">
 $(function(){
     $('#queryText').bind('input propertychange',function(){
         var result = $(this).val();
         $.ajax({
			url:"http://localhost:8080/weekfive_day03_homework/findList",
			data:{queryparams:result},
			type:"POST",
			ContentType:"application/json",
			dataType:"json"
			})
			.done(function(msg){
                    if(msg){	                    	
                    	dataShow(msg);
                    }else{
                   		 noneDataShow();
                    }
            });
     });
     
     function dataShow(data){
        	var blockHieght = 0;
        	var showArea= document.getElementById("dataShowArea");;
        	if(data.length){
        		showArea.style.display="block";
        		for(let i = 0;i<data.length;i++){
        			blockHieght +=25;
        		}
        		showArea.style.height=blockHieght+"px";
        		var op = tableOperator(document.getElementById("tableData"),data);
				op.createTable();
        		
        	}else{
        		showArea.style.display="none";
        	}
        }
        function noneDataShow(){
        	var table = document.getElementById("tableData");
        	table.innerHTML="";
        	var tr=document.createElement("tr");
        	var td1=document.createElement("td");
        	td1.innerHTML = "暂无查询信息";
        	tr.appendChild(td1);
        	table.appendChild(tr);
        }
        
        
        function tableOperator(table,data){
				var obj = {};
				obj.createTable=function(){
					table.innerHTML="";
					data.forEach((item,index)=>{
						var tr=document.createElement("tr");
						var td1=document.createElement("td");
						td1.innerHTML = item.area;						
						tr.appendChild(td1);
						table.appendChild(tr);
					});
				}				
				return obj;	
			}
     
  })

        	
  
    </script>
</head>
<body>
    
    <div class="wrapper">
    <p>Please input the params</p>
    <input type="text" id="queryText" name="queryText" placeholder="please input" />
    <div id="dataShowArea" >
    	<table id="tableData">
    	</table>
    </div>
    </div>
    
</body>
</html>